<template>
  <div class="pageBox">
    <head-component title="商品分类" :back="false"></head-component>
    <div class="content flex">
      <div class="left">
        <div class="menu">
          <div
            :class="[
              item.status
                ? 'menuItem menuItemActive flex-center'
                : 'menuItem flex-center',
            ]"
            v-for="item in menuList"
            :key="item.id"
            @click="onMenuItem(item)"
          >
            {{ item.text }}
          </div>
        </div>
      </div>
      <div class="right">
        <div class="list flex-between" v-if="secondList.length">
          <div
            class="listItem"
            v-for="item in secondList"
            :key="item.id"
            @click="onListItem(item)"
          >
            <img class="listItemImg" :src="item.thumb" alt="" />
            <p class="listItemTitle oneHidden">{{ item.text }}</p>
          </div>
        </div>
        <div class="noData" v-else>没有更多了</div>
      </div>
    </div>
    <foot-component tab="1"></foot-component>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import footComponent from "../../components/footComponent.vue";
import { post } from "../../untils/request";
import router from "../../router";

export default defineComponent({
  components: {
    headComponent,
    footComponent,
  },
  setup() {
    const menuList = ref([]);
    const secondList = ref([]);

    // 点击左边菜单栏
    function onMenuItem(param) {
      secondList.value = [];
      menuList.value.forEach((item) => {
        item.status = false;
        if (item.id == param.id) {
          item.status = true;
          secondList.value = item.children;
        }
      });
    }

    // 点击右边列表
    function onListItem(param) {
      router.push({
        path: "/goodsList2",
        query: {
          cateId: param.id,
        },
      });
    }

    function getMenuList() {
      post("/portal/Shop", {
        module: "Goods",
        interface: "5000",
      }).then((res) => {
        console.log("分类", res);
        let datas = res.data;
        datas.forEach((item, index) => {
          if (index == 0) {
            item.status = true;
            secondList.value = item.children;
          } else {
            item.status = false;
          }
        });
        menuList.value = datas;
        console.log(" menuList.value", menuList.value);
      });
    }
    getMenuList();

    onMounted(() => {
      document.documentElement.scrollTop = 0;
      document.body.style.overflow = "hidden";
    });
    onUnmounted(() => {
      document.body.style.overflow = "visible";
    });
    return {
      menuList,
      secondList,
      onMenuItem,
      onListItem,
      getMenuList,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  padding-bottom: 136px;
  .content {
    width: 100%;
    height: calc(100vh - 176px);
    background-color: #fff000;
    .left {
      width: 27%;
      min-height: 100%;
      background-color: #fff;
      padding-bottom: 92px;
      overflow-y: auto;
      .menu {
        .menuItem {
          width: 100%;
          height: 92px;
          border-radius: 16px;
          background-color: #fff;
          font-size: 28px;
          font-weight: 400;
          color: #666666;
        }
        .menuItemActive {
          border-radius: 16px 0 0 16px;
          background-color: #f5f5f5;
          font-size: 28px;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    .right {
      width: 73%;
      min-height: 100%;
      background-color: #f5f5f5;
      padding: 30px 24px 48px;
      overflow-y: auto;
      .list {
        flex-wrap: wrap;
        justify-content: flex-start;
        .listItem {
          width: 156px;
          background-color: transparent;
          flex-direction: column;
          margin: 0 5px 30px;
          position: relative;
          .listItemImg {
            width: 156px;
            height: 156px;
            border-radius: 10px;
          }
          .listItemTitle {
            width: 100%;
            font-size: 22px;
            font-weight: 400;
            color: #333333;
            padding-left: 4px;
            text-align: center;
          }
          .goodsPrice {
            padding: 9px 0 0 12px;
            align-items: flex-start;
            flex-direction: column;
            p {
              font-size: 36px;
              font-weight: 500;
              color: #e00b12;
            }
            del {
              font-size: 22px;
              font-weight: 400;
              color: #b3b3b3;
              padding-bottom: 4px;
            }
          }
        }
      }
      .noData {
        font-size: 28px;
        color: #666666;
        text-align: center;
      }
    }
  }
}
</style>